import styles from "./sidebar.module.scss";
import ChatGPTIcon from "../../icons/chatgpt.svg"
import ChatIcon from "../../icons/chat.svg"
import RecordIcon from "../../icons/record.svg"
import PayIcon from "../../icons/pay.svg"
import UserIcon from "../../icons/user.svg"
import LotteryIcon from "../../icons/lottery.svg";
import MaxIcon from "../../icons/max.svg";
import MinIcon from "../../icons/min.svg";
import ExitIcon from "../../icons/exit.svg";
import {Path} from "../../constants"
import {useNavigate} from "react-router-dom";
import {IconButton} from "@/app/components/button/button"
import {useAppConfig} from "@/app/store/config";
import {update} from "immutable";

export function SideBar() {
    const navigate = useNavigate();
    const config = useAppConfig();
    // @ts-ignore
    return (

        <div className={styles.sidebar}>

            <div className={styles["action-button"]}>
                {/* 关闭 */}
                <IconButton icon={<ExitIcon/>} backgroundColor={"#ff4e4e"} onClick={()=>{alert("暂不支持")}}></IconButton>
                {/* 缩小 */}
                <IconButton icon={<MinIcon/>} backgroundColor={"#{f3c910}"} onClick={()=>{
                    config.update(
                        (config) =>(config.tightBorder=false)
                    )
                }}></IconButton>
                {/* 全屏展示 */}
                <IconButton icon={<MaxIcon/>} backgroundColor={"#{04c204}"} onClick={()=>{
                    config.update(
                        (config) => (config.tightBorder = true)
                    )
                }}></IconButton>
            </div>

            <div className={styles["sidebar-header"]}>
                <ChatGPTIcon/>

            </div>
            <div className={styles["sidebar-chat"]}
                 onClick={() => {
                     navigate(Path.Chat)
                 }}
            >

                <ChatIcon/>
            </div>


            {/* <div className={styles["sidebar-role"]}
                 onClick={() => {
                     navigate(Path.Role)
                 }}
            >
                <RecordIcon/>
            </div> */}

            <div className={styles["sidebar-mall"]} onClick={()=>{
                navigate(Path.Sale)
            }}>
                <PayIcon/>
            </div>

            <div className={styles["sidebar-user"]} onClick={()=>{
                navigate(Path.User)
            }}>
                <UserIcon/>
            </div>

            {/*<div className={styles["sidebar-mall"]} >*/}
            {/*    <SaleIcon/>*/}
            {/*</div>*/}

            <div className={styles["sidebar-tool"]}
                 onClick={() => {
                     navigate(Path.Tool)
                 }}>
                <LotteryIcon/>
            </div>
        </div>
    )

}

